<template>
  <div style="width: 100%;overflow-y:scroll;height: calc(100vh - 72px)">
    <div class="modern-forms" style="margin-top: 120px">
      <div class="modern-container">
        <form style="text-align: left">
          <fieldset>
            <div class="mdn-group">
              <label class="field-group mdn-upload">
                <input v-model="imgpath" type="text" class="mdn-input" placeholder="no file selected" @click="selectImg" readonly>
                <label class="mdn-label">File Load</label>
                <span class="mdn-bar"></span>
                <span class="mdn-button btn-primary"> Choose Image </span>
              </label>
            </div>
            <template v-if="imgpath">
              <div class="form-row">
                <div class="mdn-group">
                  <label class="field-group mdn-upload">
                    <label class="mdn-label">Origin Image</label>
                    <img id="originImg" style="margin-top: 10px"/>
                  </label>
                </div>
                <br/>
                <div class="mdn-group">
                  <label class="field-group mdn-upload">
                    <label class="mdn-label">Edge Detect</label>
                    <canvas id="edgeImg" style="margin-top: 10px"/>
                  </label>
                </div>
              </div><!-- end form-row -->
            </template>
          </fieldset>
        </form>
      </div><!-- modern-container -->
    </div><!-- modern-forms -->
  </div>
</template>

<script>
import * as d3 from 'd3'
import { sliderBottom } from 'd3-simple-slider';
var mutex = true
export default {
  name: "c6q4",
  data(){
    return{
      imgpath:null,
      processing: false
    }
  },
  methods:{
    selectImg(){
      let input = document.createElement('input');
      input.type = 'file';
      return new Promise(function (resolve) {
        input.onchange = function(ev) {
          resolve(ev.target.files[0])
          return false;
        };
        input.click();
      }).then(file=>{
        this.imgpath = file.path
        const that = this
        return new Promise(function (resolve) {
          var reader = new FileReader();
          reader.onload = function(e){
            // target.result 该属性表示目标对象的DataURL
            let img = document.getElementById('originImg')
            img.src = e.target.result
            img.onload = ()=>resolve(img)
          }
          // 传入一个参数对象即可得到基于该参数对象的文本内容
          reader.readAsDataURL(file);
        })
      }).then(img=>{
        let edgecanvas = document.getElementById('edgeImg')
        edgecanvas.width = img.width;
        edgecanvas.height = img.height;
        let edgectx = edgecanvas.getContext("2d");
        edgectx.drawImage(img, 0, 0, img.width,img.height);
        let edgeImgData = edgectx.getImageData(0,0,img.width,img.height)
        let len = img.width * img.height;
        let dxArr = Array(len),dyArr = Array(len),gradArr = Array(len),outArr = Array(len);
        let M = img.width, N = img.height, dx, dy;
        let R,G,B,Gray,Gray2,Gray3;
        for(let v = 0;v < N-1;v++){
          for(let u = 0;u < M-1;u++){
            let i = v * M + u;
            let i2 = v * M + (u+1);
            let i3 = (v+1) * M + u;
            R = edgeImgData.data[i*4]
            G = edgeImgData.data[i*4+1]
            B = edgeImgData.data[i*4+2]
            Gray = parseInt(R*0.299 + G*0.587 + B*0.114)
            R = edgeImgData.data[i2*4]
            G = edgeImgData.data[i2*4+1]
            B = edgeImgData.data[i2*4+2]
            Gray2 = parseInt(R*0.299 + G*0.587 + B*0.114)
            R = edgeImgData.data[i3*4]
            G = edgeImgData.data[i3*4+1]
            B = edgeImgData.data[i3*4+2]
            Gray3 = parseInt(R*0.299 + G*0.587 + B*0.114)
            dxArr[i] = Gray2 - Gray;
            dyArr[i] = Gray3 - Gray;
            gradArr[i] = Math.sqrt(dxArr[i]*dxArr[i] + dyArr[i]*dyArr[i])
            edgeImgData.data[i3*4+3] = 255;
          }
        }
        // 非极大值抑制
        let weight,Grad1,Grad2,Grad3,Grad4;
        for(let v = 0;v < N-1;v++){
          for(let u = 0;u < M-1;u++){
            let i = v * M + u;
            if(gradArr[i]<1) {
              outArr[i] = 0;
              continue;
            }
            if(Math.abs(dxArr[i])>Math.abs(dyArr[i])){
              weight = Math.abs(dyArr[i]) / Math.abs(dxArr[i])
              Grad2 = gradArr[(v-1) * M + u]
              Grad4 = gradArr[(v+1) * M + u]
              if(dxArr[i]*dyArr[i]>0){
                Grad1 = gradArr[(v-1) * M + u+1]
                Grad3 = gradArr[(v+1) * M + u-1]
              }else{
                Grad1 = gradArr[(v-1) * M + u-1]
                Grad3 = gradArr[(v+1) * M + u+1]
              }
            }else{
              weight = Math.abs(dxArr[i]) / Math.abs(dyArr[i])
              Grad2 = gradArr[v * M + u-1]
              Grad4 = gradArr[v * M + u+1]
              if(dxArr[i]*dyArr[i]>0){
                Grad1 = gradArr[(v-1) * M + u-1]
                Grad3 = gradArr[(v+1) * M + u+1]
              }else{
                Grad1 = gradArr[(v+1) * M + u-1]
                Grad3 = gradArr[(v-1) * M + u+1]
              }
            }

            let gradTemp1 = weight * Grad1 + (1 - weight) * Grad2
            let gradTemp2 = weight * Grad3 + (1 - weight) * Grad4
            if(gradArr[i]>=gradTemp1&&gradArr[i]>=gradTemp2)
              outArr[i]=gradArr[i];
            else
              outArr[i]=0;
          }
        }
        for(let i = 0;i < len;i++){
          edgeImgData.data[i*4] = edgeImgData.data[i*4+1] = edgeImgData.data[i*4+2] = outArr[i] > 0?255:0
        }
        edgectx.clearRect(0,0,img.width,img.height);
        edgectx.putImageData(edgeImgData, 0, 0);
      })
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.axis path,
.axis line{
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

.MyRect {
  fill: steelblue;
}

.MyText {
  fill: white;
  text-anchor: middle;
}

</style>